<template>
  <div class="cart">
    <div class="back-icon-box">
      <van-nav-bar title="购物车" :left-text="exitText" @click-left="changeText" />
    </div>
    <div class="goods-list">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-swipe-cell v-for="(item, i) in products" :key="i">
          <div class="content-box">
            <input type="checkbox" v-model="item.check" />
            <img :src="item.src" alt="" />
            <div class="detail">
              <h3>{{ item.title }}</h3>
              <span class="sku">{{ item.up }}&#x3000;{{ item.btm }}</span>
              <div>
                <span class="red">￥{{ item.price }}</span>
                <van-stepper v-model="item.num" />
              </div>
            </div>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
    </div>
    <div class="bottom-order">
      <div>
        <van-checkbox :checked="checked">全选</van-checkbox>
      </div>
      <div>
        <span class="red">合计：￥{{ sum.toFixed(2) }}</span>
        <button>{{ byBtnText }}</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, watch } from "vue";
import store from "@/utils/store";
export default {
  setup() {
    // 头部编辑文本
    let exitText = ref("编辑");

    // 复选框组使用的数据
    let result = reactive([]);

    // 全选的数据
    let checked = ref(false);

    // 获取购物车数据
    let products = store.state.products;
    // console.log(products);

    // 下单按钮文本
    let byBtnText = ref("下单");

    // 选中商品价格
    let sum = ref(0);

    // 修改头部编辑文本的方法
    function changeText() {
      exitText.value = exitText.value == "编辑" ? "完成" : "编辑";
    }
    return {
      exitText,
      result,
      store,
      products,
      byBtnText,
      sum,
      checked,
      changeText,
    };
  },
};
</script>

<style scoped lang="scss">
.cart {
  background-color: #fff;
}
.goods-list {
  padding-bottom: 100px;
  .content-box {
    display: flex;
    font-size: 26px;
    padding: 40px 30px;
    img {
      width: 160px;
      height: 160px;
      border-radius: 8px;
      display: block;
      margin: 0 30px;
    }
    .detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .sku {
        font-size: 24px;
        color: #b2b2b2;
      }
      & > div {
        display: flex;
        width: 400px;
        justify-content: space-between;
        align-items: center;
        .red {
          color: #d00;
        }
      }
    }
  }
}
.bottom-order {
  position: fixed;
  bottom: 100px;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  font-size: 28px;
  border-top: 1px solid #eee;
  padding-left: 30px;
  .red {
    color: #d00;
  }
  button {
    width: 200px;
    height: 100px;
    background-color: #d00;
    color: #fff;
    border: none;
    outline: none;
    margin-left: 40px;
  }
}

/deep/ .van-button--danger {
  height: 100%;
}
</style>
